<template>
  <div class='container'>
    <div class="tab">
      <div class="item" v-for="menu in menus">
        <RouterLink :to="menu.path" class="item-link" active-class="active">{{ menu.name }}</RouterLink>
      </div>
    </div>

    <div class="content">
      <RouterView></RouterView>
    </div>

  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { RouterLink, RouterView } from 'vue-router'
import { getMenuList } from '@/api/menu'

import type { MenuType } from '@/types/menu'

const menus = ref<MenuType[]>([])


onMounted(async () => {
  console.log(import.meta.env.VITE_API_BASE_URL);
  const menuList = await getMenuList()
  // console.log(menuList)
  menus.value = menuList
})
</script>
<style lang='scss' scoped>
.container {
  height: 100%;

  .tab {
    display: flex;
    gap: 5px;
    background-color: #CDCDCD;
    margin: 2px;
    padding: 2px;
    border-radius: 3px;

    .item {
      .item-link {
        text-decoration: none;
        font-size: 13px;
        text-decoration: none;
        transition: color 0.3s ease; // 可选：颜色过渡动画

        &.active {
          color: #9ea8a3; // 激活状态下的颜色（可自定义）
        }
      }
    }
  }
}
</style>